var app = new Vue({
    el: '#app',
    data: {
        // 记录点击span的索引
        index: 0, 
        chats:[
           {name:'李硕',imgurl:'img/1.jpg'},
           {name:'小许子',imgurl:'img/2.jpg'},
           {name:'李硕',imgurl:'img/3.jpg'},
           {name:'小许子',imgurl:'img/4.jpg'},
           {name:'李硕',imgurl:'img/5.jpg'},
        ],
        friends:[
            {title:'小蜜们',list:['婷婷','微微','静静','摸摸','雯雯']},
            {title:'同学',list:['小许','小硕','大许','大硕']},
            {title:'朋友',list:['康康','Michael','Jane','Maria']},

        ],
        isShowArray:[false,false,false],

        // 临时变量,缓存数据
        // temp: false, //配合index.html中第一种方法使用
    },
 
    methods:{
        showOrNot:function(index){
            // 取出对应分组的boolean值,取反
            var temp =!this.isShowArray[index];
            // 修改
            this.isShowArray.splice(index,1,temp);

            //注意：下方写法vue检测不到，不会刷新页面
            // this.isShowArray[index] = !this.isShowArray[index];
        }
    }
})